<template>
	<div id="userPage">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:toolbar-config="toolbarConfig"
			:tree-config="treeConfig"
			:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
		>
			<!-- <template #name="{ row }">
				<span>{{ row.roleName }}</span>
			</template> -->
			<template #state="{ row }">
				<span>{{ row.whetherEnable == 0 ? '已启用' : '已禁用' }}</span>
			</template>
			<template #toolbar_buttons>
				<el-input
					v-model="userInput"
					class="user_input"
					placeholder="请输入角色名称或拼音码"
					size="medium"
				></el-input>
				<el-button type="primary" size="small" @click="handlerSave">
					查询
				</el-button>
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)">
					编辑
				</el-button>
				<!-- <el-button
					v-if="row.parentUuid == '0' ? true : false"
					type="text"
					size="small"
					@click="treeAddClick(row)"
				>
					添加
				</el-button> -->
				<el-button type="text" size="small" @click="roleDelete(row)">
					删除
				</el-button>
			</template>
		</shyt-table>
		<!-- 新增弹框 -->
		<newly :increased="increased" @newlyClick="newlyClick"></newly>
		<!-- 编辑弹框 -->
		<compile
			:child-none-dialog="childNoneDialog"
			:update-data="updateData"
			:compile-data="compileData"
			:whether-enable-state="whetherEnableState"
			@compileClick="compileClick"
		></compile>
		<!-- 添加弹框 -->
		<addChild
			:role-id="roleId"
			:add-child-none-dialog="addChildNoneDialog"
			:node-list-data="nodeListData"
			:role-parent-uuid="roleParentUuid"
			@addChildClick="addChildClick"
		></addChild>
	</div>
</template>

<script>
import {
	// roleInsert,
	roleTreeData,
	// roleUpdate,
	roleDelete,
	// roleNameCheck,
} from '@/http/api.js'
import addChild from './components/addChild.vue'
import newly from './components/newly.vue'
import compile from './components/compile.vue'
export default {
	name: 'RolePage',
	components: {
		addChild,
		newly,
		compile,
	},
	data() {
		return {
			dialogTableVisible: false,
			increased: false,
			dialogAllocation: false,
			loading: false,
			childNoneDialog: false,
			addChildNoneDialog: false,
			nodeListData: null,
			// delivery: false,
			amendDelivery: false,
			roleSave: false,
			updateDelivery: false,
			shytTable: true,
			// whetherEnableS: 0,
			userInput: '',
			childrenNoneRow: '',
			childrenNoneRowContent: '',
			updateData: {},
			roleId: '',
			roleParentUuid: '',
			compileUuId: '',
			compileId: '',
			compileContent: '',
			whetherEnableState: '',
			//输入框校验
			rules: {
				account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur' },
					{ min: 6, message: '不得少于6位', trigger: 'blur' },
				],
			},
			options: [],

			columns: [
				{
					field: 'roleName',
					title: '角色名称',
					treeNode: true,
				},
				{
					field: 'state',
					title: '启用状态',
					slots: { default: 'state' },
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			tableData: [],
			// 按钮
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			// 分页
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
			compileData: {
				roleName: '',
			},
			multipleSelection: [],
			treeNodesInfo: '',
			whetherEnable: '',
			treeConfig: {
				children: 'children',
				expandAll: true,
			},
		}
	},
	mounted() {
		this.shytTable = this.$refs.shytTable.$refs.xTable
	},
	created() {
		this.roleData()
	},
	methods: {
		roleData(roleNameOrInputCode) {
			roleTreeData({
				roleNameOrInputCode,
			}).then(data => {
				if (data.data.head.code == 200) {
					this.tableData = data.data.data
					this.$nextTick(() => {
						this.shytTable.setAllTreeExpand(true)
					})
				}
			})
		},
		// 编辑
		handlerEditRow(row) {
			console.log(row)
			this.updateData = this._.cloneDeep(row)
			this.compileContent = row.roleName
			this.compileUuId = row.parentUuid
			this.compileId = row.id

			this.compileData.roleName = row.roleName
			if (row.whetherEnable == 1) {
				this.updateDelivery = false
				this.whetherEnableState = false
			} else {
				this.updateDelivery = true
				this.whetherEnableState = true
			}
			this.childNoneDialog = true
		},
		// 新增
		handlerAddClick() {
			this.increased = true
		},
		// 查询
		handlerSave() {
			if (this.userInput == '') {
				this.roleData()
			} else {
				this.roleData(this.userInput.toUpperCase())
			}
		},
		// 用户分配
		Allocation() {
			this.dialogAllocation = true
		},

		AllocationClick(bol) {
			this.dialogAllocation = bol
		},
		// 获取当前编辑的行
		treeAddClick(row) {
			this.addChildNoneDialog = true
			this.nodeListData = row
			this.roleId = row.id
			this.roleParentUuid = row.parentUuid
			if (row.whetherEnable == 0) {
				this.amendDelivery = true
			} else {
				this.amendDelivery = false
			}
			if (this.addChildNoneDialog == false) {
				this.roleData()
			}
		},
		// 删除
		roleDelete(row) {
			this.$confirm('是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					roleDelete(row).then(({ data }) => {
						if (data.head.code == 200) {
							this.$message({
								message: '删除成功',
								type: 'success',
							})
							this.roleData()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 添加弹框
		addChildClick(addState) {
			this.addChildNoneDialog = addState.verdict
			if (addState.typeValue == 1) {
				setTimeout(this.roleData, 500)
			}
		},
		// 新增弹框
		newlyClick(reception) {
			this.increased = false
			// return new Promise(rs => {
			if (reception.typeValue == 1) {
				// rs(this.roleData())
				setTimeout(this.roleData, 500)
			}
			// })
		},
		// 编辑弹框
		compileClick(compile) {
			this.childNoneDialog = compile.verdict
			// return new Promise(rs => {
			if (compile.typeValue == 1) {
				// rs(this.roleData())
				setTimeout(this.roleData, 500)
			}
			// })
		},
	},
}
</script>

<style lang="scss" scoped>
.user_input {
	width: 200px;
}
</style>
